<template>
  <div ref="refChart" style="width: 100%; height: 170px"></div>
</template>

<script lang="ts" setup>
import {onUnmounted, onMounted, ref} from 'vue';
import * as echarts from 'echarts';
import {RequestBalanceData} from '@/api/path/index.js';

type EChartsOption = echarts.EChartsOption;
const refChart = ref();
const chartInstance = ref();
const chartData = ref([]);
// 获取接口数据
const getData = () => {
  return new Promise((resolve, reject) => {
    RequestBalanceData()
      .then((res: any) => {
        // res.resultObj.forEach((item: any) => {
        //   delete item.measure;
        // });
        // res.resultObj.find((item: any) => {
        //   if (item.name == '溯源件上架率') {
        //     chartData.value = item.value;
        //   }
        // });
         chartData.value = res.resultObj.disRate;
        resolve(res.resultObj);
      })
      .catch((err: any) => {
        reject(err);
      });
  });
};
onMounted(async () => {
  await getData();
  //图表初始化
  initChart();
  // 调用Echarts图表自适应方法
  screenAdapter();
  // Echarts图表自适应
  window.addEventListener('resize', screenAdapter);
});

const initChart = () => {
  chartInstance.value = echarts.init(refChart.value);
  const initOption: EChartsOption = {
    title: {
      text: `拆解率 ${chartData.value}%`,
      left: 'center',
      bottom: '0',
      textStyle: {
        fontSize: '12',
        color: '#464646',
      },
    },
    color: ['#017efa'],
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
        },
        axisLine: {
          lineStyle: {
            width: 5,
          },
        },
        splitLine: {
          length: 8,
          lineStyle: {
            width: 1,
            color: '#999',
          },
        },
        detail: {
          fontSize: 14,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 6,
          itemStyle: {
            borderWidth: 2,
          },
        },
        axisLabel: {
          distance: 10,
          color: '#999',
          fontSize: 8,
        },
        data: [{value: chartData.value}],
      },
    ],
  };
  // 图表初始化配置
  chartInstance.value?.setOption(initOption);
};
const screenAdapter = () => {
  // 手动的调用图表对象的resize 才能产生效果
  chartInstance.value.resize({ animation: { duration: 300 } });
};
onUnmounted(() => {
  // 销毁Echarts图表
  chartInstance.value.dispose();
  chartInstance.value = null;
  // Echarts图表自适应销毁
  window.removeEventListener('resize', screenAdapter);
});
// import { defineComponent, onMounted, ref, watch } from 'vue';
// import * as echarts from 'echarts';
// import { RequestStatisticGetLastDayStoreInfo } from "@/api/path/index.js";
// export default defineComponent({
//     setup() {
//         const chartContainer5 = ref<HTMLElement | null>(null);
//         let chartInstance: echarts.ECharts | null = null;
//         const cale = ref<any>(0)
//         const fittingsShop = ref<any>(0)
//         const initChart = () => {
//             RequestStatisticGetLastDayStoreInfo().then((res: any) => {
//                 res.resultObj.forEach((item: any) => {
//                     if (item.name == '溯源件上架率') {
//                         cale.value = item.value
//                     } else if (item.name == '昨日溯源件上商城数量') {
//                         fittingsShop.value = item.value
//                     }
//                 });
//                 if (chartContainer5.value) {
//                     chartInstance = echarts.init(chartContainer5.value);
//                     // 设置ECharts选项
//                     chartInstance.setOption({
//                         title: {
//                             text: `上架率 ${fittingsShop.value}%`,
//                             bottom: '0.375rem',
//                             left: 'center',
//                             textStyle: {
//                                 fontSize: '12',
//                                 color: '#464646'
//                             }
//                         },
//                         color: ['#017efa'],
//                         series: [
//                             {
//                                 type: 'gauge',
//                                 progress: {
//                                     show: true,
//                                     width: 5
//                                 },
//                                 axisLine: {
//                                     lineStyle: {
//                                         width: 5
//                                     }
//                                 },
//                                 splitLine: {
//                                     length: 8,
//                                     lineStyle: {
//                                         width: 1,
//                                         color: '#999'
//                                     }
//                                 },
//                                 axisLabel: {
//                                     distance: 10,
//                                     color: '#999',
//                                     fontSize: 8
//                                 },
//                                 anchor: {
//                                     show: true,
//                                     showAbove: true,
//                                     size: 6,
//                                     itemStyle: {
//                                         borderWidth: 2,
//                                     }
//                                 },
//                                 detail: {
//                                     fontSize: 16
//                                 },
//                                 data: [
//                                     {
//                                         value: cale.value
//                                     }
//                                 ]
//                             }
//                         ]
//                     });
//                 }
//             })
//         };
//         //
//         const resizeChart = () => {
//             if (chartInstance) {
//                 chartInstance.resize();
//             }
//         };
//
//         onMounted(() => {
//             initChart();
//             window.addEventListener('resize', resizeChart);
//         });
//
//         watch(chartContainer5, () => {
//             if (chartInstance) {
//                 chartInstance.dispose(); // 销毁旧的实例
//             }
//             initChart();
//         });
//
//         return {
//             chartContainer5,
//         };
//     },
// });
</script>
